<template>
    <div class="publish">
        <div class="title">
            <h1>文章标题</h1>
            <el-input v-model="inputTitle" placeholder="请输入文章标题"></el-input>
        </div>
        <h1>文章分类</h1>
        <el-select v-model="value" placeholder="请选择">
            <el-option
            v-for="item in menuList"
            :key="item.id"
            :label="item.classname"
            :value="item.classmj">
            </el-option>
        </el-select>
        <div class="mdfile">
            <h1>请选择上传的.md的文件</h1><br>
            <input type="file" @change="getcenten" name="file" id="md_file">
        </div>
        <hr>
        <div class="mdfile">
            <h1>封面图片</h1>
            <cfile @getImgUrl="getImgUrl"></cfile>
        </div>
        <el-button type="primary" size="medium" @click="gethtml" style="margin-top:15px;">发表</el-button>
    </div>
</template>
<script>
import E from 'wangeditor';
import Cfile from './file'
import {addArticle, getClassMenu} from 'api/article' 
export default {
    components:{
        Cfile,
    },
    data(){
        return {
            editor:{},
            inputTitle:"",
            fileurl:"",
            menuList: [],
            value: '',
            md_fileCenten:""
        }
    },
    computed:{
        userInfo(){
            return this.$store.state.userinfo
        }
    },
    methods:{
        getImgUrl(imgurl){
            alert(0)
            this.fileurl = imgurl;
            console.log(imgurl)
        },
        getcenten(){
            let flObj = document.getElementById("md_file");
            let file=flObj.files[0];  //因为每次只上传了一张图片，所以获取到flObj.files[0];    

            let fReader=new FileReader();
            fReader.readAsText(file, "UTF8"); //将文件读取为文本
            let that = this
            fReader.onload=function(e){
                that.md_fileCenten=this.result;
            }

        },
        gethtml(){
            if(this.inputTitle<15){
                this.$message('标题不能小于15个字');
            }
            let data = {
                mjid:this.value,
                uId: this.userInfo.id,
                wtitle: this.inputTitle,
                conten: this.md_fileCenten,
                imgurl: this.fileurl
            }
            addArticle(data).then(res=>{
                if(res.code==0){
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    });
                }
            });
        },
        _getClassMenu(){
            getClassMenu().then(res=>{
                this.menuList = res.data
            });
            setTimeout(() => {
                console.log(1,this.userInfo.id)
                if(this.userInfo.id==undefined){
                    this.$alert('你还没登录', '标题名称', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$router.push({name:'首页'})
                        }
                    });
                }
            }, 500);
            
        }
    },
    mounted(){
        this._getClassMenu()
    },
    created(){

    }
    
}
</script>
<style lang="scss" scoped>
.publish{
    max-width:1000px;
    padding-left: 100px;
}
.title{
    padding-bottom: 10px;
    h1{
        font-size: 20px;
        font-weight: bold;
        padding-bottom: 10px;
    }
}
.mdfile{
    margin: 40px 0;
}
</style>


